<template>
  <test-component-item
    title="test"
  >
    <div style="width:100%;height:600px">
      <el-button @click="onRun">
        执行
      </el-button>
      <ev-code 
        v-model:code="fn"
        style="height:200px;width:600px"
      >
      </ev-code>
    </div>
  </test-component-item>
  <test-component-item
    title="chart"
  >
    <div style="height:400px;width:400px">
      <ev-chart
        :option="option"
      >
      </ev-chart>
    </div>
  </test-component-item>
</template>

<script lang='ts' setup label="EvTestComponent">
import TestComponentItem from '@/components/Test/TestComponentItem.vue'
import axios from 'axios'
import { reactive, toRefs, ref, watch, onMounted, provide, getCurrentInstance } from 'vue'

const codeOption = reactive({
    mode: 'javascript',
})
const option = reactive({
    title: {
        color: '#ccc',
        show: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999',
            },
        },
    },
    legend: {
        show: true,
        type: 'plain',
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            fontStyle: 'italic',
        },
    },
    yAxis: {
        type: 'category',
        axisPointer: {
            type: 'shadow',
        },
    },
    series: [
        {
            name: '类目一',
            type: 'bar',
            data: [
                964,
            ],
            backgroundStyle: {
                color: 'rgba(190, 51, 51, 1)',
            },
            showBackground: true,
        },
        {
            name: '类目二',
            type: 'line',
            data: [
                839,
            ],
        },
        {
            name: '类目三',
            type: 'bar',
            data: [
                839,
            ],
        },
    ],
})
const { proxy, ctx } = getCurrentInstance()
const test = ref('asdqwe')
const fn = ref('')
onMounted(() => {
    
})
const getApi = () => axios.post('http://jsonplaceholder.typicode.com/comments')
const onRun = async () => {
    const res = await getApi()
    eval(fn.value)()
    const fns = new Function('return' + fn.value)
    console.log(fns().apply(res))
    // const fns = new Function(test.value, test)
}

</script>
<style scoped lang='scss'>
.ev_echart{
  width: 400px;
  height: 400px;
}
.ev_echart2{
  width: 400px;
  height: 400px;
}
</style>